<template>
  <div class="app" type="flex">
    <el-row type="flex" justify="space-between" class="header">
      <el-col :span="12" class="logo">煜成购后台管理系统</el-col>
      <el-col :span="12" class="other">
        <div class="icon el-icon-user">管理员</div>
        <div class="icon el-icon-switch-button" @click="handleLogout">退出</div>
      </el-col>
    </el-row>
    <el-row class="main" type="flex" justify="space-between">
      <el-menu
        :default-active="$route.path"
        class="aside"
        :collapse="isCollapse"
        :collapse-transition="false"
        :style="{ width: !isCollapse ? '210px' : '' }"
        unique-opened
        router
      >
        <template v-for="(item, index) in $router.options.routes">
          <template v-if="!item.hidden">
            <template v-if="item.leaf">
              <el-submenu :index="item.path" :key="index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </template>
                <template v-for="(item, index) in item.children">
                  <el-menu-item :index="item.path" :key="index">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="index">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </template>
        <div
          class="collapse"
          :class="{
            'el-icon-s-unfold': isCollapse,
            'el-icon-s-fold': !isCollapse,
          }"
          @click="isCollapse = !isCollapse"
        ></div>
      </el-menu>
      <div class="wrapper">
        <router-view />
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  mounted() {},
  methods: {
    handleLogout() {
      this.$confirm("您确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        sessionStorage.clear();
        localStorage.clear();
        this.$router.push("/login");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
  .header {
    height: 50px;
    background-color: #409eff;
    padding: 0 15px;
    overflow: hidden;
    .logo {
      font-size: 20px;
      color: #fff;
      line-height: 50px;
    }
    .other {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .icon {
        margin-left: 20px;
        color: #fff;
        cursor: pointer;
        &:before {
          margin-right: 5px;
        }
      }
    }
  }
  .main {
    height: calc(100vh - 50px);
    overflow: hidden;
    .aside {
      position: relative;
      background-color: #fbfdff;
      border-right-color: #ebeef5;
      .el-menu-item.is-active {
        background-color: #ecf5ff;
      }
      .collapse {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
        background-color: #fbfdff;
        &:hover {
          background-color: #ecf5ff;
        }
      }
    }
    .wrapper {
      flex: 1;
      width: 1%;
      overflow: hidden;
      overflow-y: auto;
      padding: 15px;
    }
  }
}
</style>
